<script setup>
import { ref, onMounted } from "vue";
import { getProcurementSupervision } from "@/api/dashboard.js";
import mainHeader from "@/components/MainHeader.vue";
import sectionReport from "@/components/SectionReport.vue";
import fulfillmentCard from "@/components/supervision/fulfillment-card.vue";
import sectionCard from "@/components/supervision/section-card.vue";
import targetClassDistribution from "@/components/supervision/target-class-distribution.vue";
import targetNumber from "@/components/supervision/target-number.vue";
import questionDistribution from "@/components/supervision/question-distribution.vue";
import alarmQuestionDistribution from "@/components/supervision/alarm-question-distribution.vue";
import targetNumberLineChart from "@/components/supervision/target-number-line-chart.vue"
import { useRouter } from "vue-router";

const router = useRouter();

onMounted(() => {
  // let query = router.currentRoute.value.query;
  // const params = {
  //   buCode: query.buCode || '50',
  //   month: new Date().getMonth() + 1,
  //   ldap: query.ldap,
  //   year: new Date().getFullYear(),
  // }
  // dataInit(params);
})
const procurementSupervisionData = ref({});
const renderKey = ref();
const dataInit = (params) => {
  params.ldap = router.currentRoute.value.query.ldap
  getProcurementSupervision(params).then(res => {
    if (res.code === 200) {
      console.log('res.data', res.data)
      procurementSupervisionData.value = res.data;
      renderKey.value = Math.random();
    }
  })
}
const month = ref();
const getMonth = (monthValue) => {
  month.value = monthValue;
}
const year = ref();
const getYear = (value) => {
  year.value = value;
};
const title = '基本信息：'
const content = ref('华润集团国资监管创新应用平台，汇聚全集团采购全链路业务数据，应用OCR、NLP等技术，对上报数据进行规则校验，实现了采购过程合规、招采问题线索发现、采购监管画像等场景的智能应用，集团全级次覆盖。同时，赋能了采购业务域合规性的提升，引领了采购业务域向智能化迈进。')
const frequency = ref('按月上报')

const jumpLink = () => {
  // parent.location.href = parent.location.origin+'/#/data-quality-home'
  window.parent.postMessage("data-quality-home","*");
}
</script>

<template>
  <div class="largeScreenContainer">
    <huarun-header title="合规监管月报" :detailMonth="true" @getData="dataInit" @getMonth="getMonth" @getYear="getYear"/>
    <div class="tabs">
      <a-button type="primary" class="button">合规监管月报</a-button>
      <a-button type='default' class="button un-active" @click="jumpLink">数据质量月报</a-button>
    </div>
    
    <div :key="renderKey" class="column-flex">
      <mainHeader :title="title" :content="content" :frequency="frequency" office="国资委改革局" department="集团法律部"/>
      <div class="row-flex lineOne">
        <div class="div-border lineOne-div">
          <!-- <sectionReport :sectionVo="procurementSupervisionData.sectionVo" :month="month" /> -->

          <sectionCard :sectionVo="procurementSupervisionData.sectionVo" title="上报采购包或标段总数" type="zs"></sectionCard>
        </div>

        <div class="div-border lineOne-div">
          <sectionCard :sectionVo="procurementSupervisionData.sectionVo" title="不通过标段数" type="btg"></sectionCard>
        </div>

        <div class="div-border lineOne-div">
          <sectionCard :sectionVo="procurementSupervisionData.sectionVo" title="通过标段数" type="tg"></sectionCard>
        </div>

        <div class="div-border lineOne-div">
          <sectionCard :sectionVo="procurementSupervisionData.sectionVo" title="警告标段数" type="jg"></sectionCard>
        </div>
      </div>
      
      <div class="row-flex lineTwo">
        <div class="div-border lineTwo-div">
          <target-number-line-chart :report-data="procurementSupervisionData.lineEcharts" :year="year" />
        </div>
        <div class="div-border lineTwo-div">
          <target-class-distribution :report-data="procurementSupervisionData.bidList"  />
        </div>
      </div>

      <div class="row-flex lineThree">
        <div class="div-border lineThree-div">
          <fulfillment-card :report-data="procurementSupervisionData.honourAgreement" title="招采预算" type="zc"></fulfillment-card>
        </div>

        <div class="div-border lineThree-div">
          <fulfillment-card :report-data="procurementSupervisionData.honourAgreement" title="合同金额" type="ht"></fulfillment-card>
        </div>

        <div class="div-border lineThree-div">
          <fulfillment-card :report-data="procurementSupervisionData.honourAgreement" title="履约金额" type="ly"></fulfillment-card>
        </div>
      </div>

      <div class="row-flex lineSix">
        <div class="div-border lineSix-div">
          <target-number :report-data="procurementSupervisionData.barEcharts" :month="month" />
        </div>
      </div>

      <div class="row-flex lineFive">
        <div class="div-border lineFive-div">
          <question-distribution :report-data="procurementSupervisionData.noPassProblem" />
        </div>
        <div class="div-border lineFive-div">
          <alarm-question-distribution :report-data="procurementSupervisionData.warnProblems" />
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.largeScreenContainer {
  padding-bottom: 40px;
  background-image:none;
  .button{
    width: 130px;
    height: 45px;
    margin-left: 40px;
    margin-top: 20px;
    border-radius: 5px;
    background-color: #FFAD11;
    color: #fff
  }
  .un-active{
    color: #FFAD11;
    background: #fff;
    border: 1px solid #FFAD11;
  }
  .tabs{
    display: flex;
    align-items: center;
  }
}
@media screen and (width < 1920px) {
  .largeScreenContainer {
    width: 100%;
    min-height: 1080px;
    //overflow: scroll;
  }
}
.main-content {
  flex-grow: 1;
  padding: 40px;
  display: flex;
  justify-content: space-between;
}
.contentDiv {
  width: 425px;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 10px;
  border: 2px solid;
  border-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  .content-title {
    height: 78px;
    width: 100%;
    text-align: center;
    font-family: Source Han Sans CN;
    font-size: 26px;
    font-weight: 900;
    color: #16408f;
    line-height: 78px;
  }
  .content-main {
    flex-grow: 1;
    padding: 10px 0;
  }
}
.lineOne {
  width: 100%;
  .lineOne-div {
    height: 200px;
    width: 25%;
  }
}
.lineTwo {
  width: 100%;
  .lineTwo-div {
    height: 369px;
    width: 50%;
  }
}

.lineThree {
  width: 100%;
  .lineThree-div {
    width: 33.3%;
    height: 200px;
  }
}

.lineFour {
  width: 100%;
  height: 369px;
}

.lineFive {
  width: 100%;
  .lineFive-div {
    width: 50%;
    height: 369px;
  }
}
.lineSix {
  width: 100%;
  .lineSix-div {
    width: 100%;
    height: 369px;
  }
}
</style>
